<template>
    <div class="head">
    <svg class="icon">
      <use xlink:href="#icon-bean"></use>
    </svg>
    <span>豆果美食</span>
  </div>
  <router-view></router-view>
  <nut-tabbar bottom safe-area-inset-bottom placeholder v-model="active">
    <nut-tabbar-item v-for="(item, index) in List" :tab-title="item.title" :icon="item.icon" :to="item.to" :name="item.to.path">
    </nut-tabbar-item>
  </nut-tabbar>
</template>
<script>
import { h ,ref} from 'vue';
import {useRoute} from 'vue-router'
import { Home, Comment, Shop, Star, My2 } from '@nutui/icons-vue';
export default {
  components: { Home, Comment, Shop, Star, My2 },
  setup() {
    const route = useRoute()
    
    const active =ref(route.path)
    console.log(active.value);
    const List = [
      {
        title: '首页',
        icon: h(Home),
        to: { path: '/mobile/main' }
      },
      // {
      //   title: '课堂',
      //   icon: h(Comment),
      //   to: { path: '/mobile/class' }
      // },
      {
        title: '商城',
        icon: h(Shop),
        to: { path: '/mobile/shop' }
      },
      // {
      //   title: '收藏夹',
      //   icon: h(Star),
      //   to: { path: '/mobile/collect' }
      // },
      {
        title: '我的',
        icon: h(My2),
        to: { path: '/mobile/mine' }
      }
    ];
    return {
      List,active
    };
  }
};
</script>
<style scoped>
.head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.head .icon {
  width: 24px;
  height: 24px;
}

.head span {
  width: 80px;
  text-align: center;
}
</style>
